<template>
	<div class="about">
		<h1>添加菜品</h1>
		<el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm"
			:size="formSize">
			<el-form-item label="菜品分类名称" prop="typeOfDishes">
				<el-input v-model="ruleForm.typeOfDishes"></el-input>
			</el-form-item>

			<el-form-item>
				<el-button type="primary" @click="addDishesType(ruleFormRef)">提交</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>
<script>
	import qs from 'qs'
	export default {
		name: "AddDishes",
		data() {
			return {
				ruleForm: {
					shopArray:[],
					typeOfDishes: '',
				},
				rules: {
					typeOfDishes: [{
							required: true,
							message: '请输入菜品名称',
							trigger: 'blur',
						},
						{
							min: 2,
							max: 10,
							message: '长度最少是2',
							trigger: 'blur',
						},
					],
				}
			}
		},
		mounted() {
			this.getDishesTypeList();
			this.getShopNameList();
		},
		methods: {
			//获取菜品类型名称
			getDishesTypeList() {
				this.$axios.get('/dishes/type/list')
					.then(res => {
						this.ruleForm.dishesTypeNameArray = res.data;
					}).catch(e => {
						this.$message({
							message: e,
							type: 'warning'
						})
					})
			},
			//获取店铺名称名称
			getShopNameList() {
				this.$axios.get('/shop/list')
					.then(res => {
						this.ruleForm.shopArray = res.data;
					}).catch(e => {
						this.$message({
							message: e,
							type: 'warning'
						})
					})
			},
			addDishesType() {
				if (!this.ruleForm.typeOfDishes) {
					//已经全局加载了element-plus
					this.$message({
						message: "你还没有输入菜品分类名称"
					})
					return;
				}
				this.$axios.post('/dishes/type/insert', qs.stringify(this.ruleForm))
					.then(res => {
						if (res.data) {
							this.$message({
								message: "添加成功",
								type: 'success'
							})
							this.$router.push("/dishesList")
						} else {
							this.$message({
								message: "添加失败",
								type: 'warning'
							})
						}
					}).catch(e => {
						this.$message({
							message: e,
							type: 'warning'
						})
					})
			}

		}
	}
</script>
